<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>使用自定义指令的时候需要加v-</p>
        <input type="text">
        <input type="text" v-focus>
        <input type="text" v-color='msg_dict'>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // vue 实现自定义指令名字为focus
    Vue.directive('focus', {
        // inserted 是固定写法
        inserted: function (el) {
            // el 代表的是指令所绑定的元素
            el.focus();
        }
    })

    var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'orange',
                    msg_dict: {
                        color: 'orange'
                    }
                },
                methods: {
                    handle: function () {

                    }
                },
                // 添加局部指令
                directives: {
                    // inserted 是固定写法
                    color: {
                        bind: function (el, binding) {
                            // el 代表的是指令所绑定的元素
                            console.log(binding)
                            el.style.backgroundColor = binding.value.color
                        }
                    },
                    focus: {
                        // inserted 是固定写法
                        inserted: function (el) {
                            // el 代表的是指令所绑定的元素
                            el.focus();
                        }
                    }
                    }
                })
</script>

</html>